<template>
    <div id="student">
        <h1>学生信息列表</h1>
        <h5 style="text-align: left;margin-left: 100px">
            <span>欢迎你: {{username}}</span>
            <el-button type="warning" size="mini" @click="logout" style="margin-left: 20px">安全退出</el-button>
        </h5>
        <!--搜索区域-->
        <div id="student-search">
            <el-form :inline="true" class="demo-form-inline" size="small" :model="studentPage">

                <el-form-item label="学生姓名">
                    <el-input placeholder="学生姓名" v-model="studentPage.stuName"></el-input>
                </el-form-item>

                <el-form-item label="联系方式">
                    <el-input placeholder="联系方式" v-model="studentPage.tel"></el-input>
                </el-form-item>

                <el-form-item>
                    <el-button type="primary" icon="el-icon-search" @click="searchStudent">搜索</el-button>
                </el-form-item>

            </el-form>
        </div>
        <!--头部工具栏-->
        <div id="header-button">

            <el-button @click="dialogFormVisible =true" style="margin-right: 5px" size="mini" type="primary"
                       icon="el-icon-circle-plus-outline" plain>
                新增
            </el-button>

            <el-popconfirm title="确定删除选中行吗？" @confirm="batchDelete">
                <el-button slot="reference" size="mini" type="danger" icon="el-icon-delete" plain>批量删除</el-button>
            </el-popconfirm>

        </div>
        <!-- 学生信息列表表格-->
        <div id="student-table">
            <el-table
                    ref="multipleTable"
                    :data="tableData"
                    tooltip-effect="dark"
                    style="width: 100%"
                    @selection-change="handleSelectionChange">
                <el-table-column
                        type="selection"
                        width="55">
                </el-table-column>

                <el-table-column
                        prop="id"
                        label="ID">
                </el-table-column>

                <el-table-column
                        prop="stuName"
                        label="姓名">
                </el-table-column>

                <el-table-column
                        prop="stuAge"
                        label="年龄"
                        show-overflow-tooltip>
                </el-table-column>

                <el-table-column
                        prop="score"
                        label="分数"
                        show-overflow-tooltip>
                </el-table-column>

                <el-table-column
                        prop="sex"
                        label="性别"
                        show-overflow-tooltip>
                    <template slot-scope="scope">{{ scope.row.sex==1?"男":"女" }}</template>
                </el-table-column>

                <el-table-column
                        prop="tel"
                        label="联系方式"
                        show-overflow-tooltip>
                </el-table-column>

                <el-table-column label="操作">
                    <template slot-scope="scope">
                        <el-button
                                style="margin-right: 5px"
                                size="mini"
                                @click="handleEdit(scope.row)">编辑
                        </el-button>

                        <el-popconfirm title="确定删除当前行吗？" @confirm="deleteById(scope.row.id)">
                            <el-button
                                    size="mini"
                                    type="danger"
                                    slot="reference">删除
                            </el-button>
                        </el-popconfirm>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <!--        表格数据分页
        total: 数据总条数
        page-size:设置默认一页显示多少条数据
        page-sizes: 设置每页显示多少条下拉选的值
        current-page: 当前页是第几页
        @size-change：  handleSizeChange  回调函数
        @current-change ：handleCurrentChange  页码切换时的回调函数
        -->
        <div id="student-page">
            <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="currentPage"
                    :page-sizes="[5, 10, 15, 20]"
                    :page-size="pageSize"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="total">
            </el-pagination>
        </div>

        <!--弹出层-->
        <div id="dialog">
            <el-dialog :title="dialogTitle" :visible.sync="dialogFormVisible" @close="dialogClose">
                <el-form :label-position="labelPosition" label-width="80px" :model="student">
                    <el-form-item label="姓名">
                        <el-input autocomplete="off" v-model="student.stuName"></el-input>
                    </el-form-item>
                    <el-form-item label="年龄">
                        <el-input autocomplete="off" v-model="student.stuAge"></el-input>
                    </el-form-item>

                    <el-form-item label="分数">
                        <el-input autocomplete="off" v-model="student.score"></el-input>
                    </el-form-item>
                    <el-form-item label="联系方式">
                        <el-input autocomplete="off" v-model="student.tel"></el-input>
                    </el-form-item>
                    <el-form-item label="性别">
                        <el-select placeholder="请选择性别" style="width: 100%" v-model="student.sex">
                            <el-option label="男" :value="1"></el-option>
                            <el-option label="女" :value="0"></el-option>
                        </el-select>
                    </el-form-item>
                </el-form>
                <div slot="footer" class="dialog-footer">
                    <el-button @click="dialogFormVisible = false">取 消</el-button>
                    <!--
                         v-if    实现元素的显示和隐藏操作   true  显示 false 隐藏
                    -->
                    <el-button type="primary" v-if="dialogTitle=='新增学生信息'" @click="addStudent">确 定</el-button>
                    <el-button type="primary" v-if="dialogTitle=='编辑学生信息'" @click="editStudent">确 定</el-button>
                </div>
            </el-dialog>
        </div>
    </div>
</template>

<!-- 编写javascript代码的位置-->
<script>
    import {batchDeleteStudent, insertStudent, studentList, updateStudent} from "@/api/student";

    export default {
        name: "StudentView",
        data() {
            return {
                username:sessionStorage.getItem("username"),
                student: {
                    stuName: '',
                    stuAge: '',
                    sex: '',
                    score: '',
                    tel: ''
                },
                currentPage: 1,
                pageSize: 5,
                total: 0,
                studentPage: {
                    size: 5,
                    currentPage: 1,
                    stuName: '',
                    tel: ''
                },
                // 设置表单中标签的位置
                labelPosition: "right",
                // 设置弹出层的标题
                dialogTitle: "新增学生信息",
                // 设置弹出层 显示还是隐藏   true  显示  false 隐藏
                dialogFormVisible: false,
                tableData: [],
                // 选中行数据 id
                multipleSelection: []
            }
        },
        methods: {

            // 退出登录的回调函数
            logout(){
                //  清除本地缓存
                sessionStorage.removeItem("username")
                //  跳转路由到登录页
                this.$router.push("/login")
            },
            //搜索学生信息
            searchStudent() {
                this.getStudentPage(this.studentPage)
            },
            getStudentPage(params) {
                studentList(params).then(resp => {
                    if (resp.code == 0) {
                        this.tableData = resp.data.records
                        this.total = resp.data.total
                    }
                })
            },
            // 添加学生信息的回调函数
            addStudent() {

                //  将弹出层中用户填写的学生信息传递后台  实现数据的添加
                insertStudent(this.student).then(resp => {
                    if (resp.code == 0) {
                        //提示信息
                        this.$message.success(resp.message)
                        // 重载表格
                        this.getStudentPage(this.studentPage)
                        // 关闭弹出层
                        this.dialogFormVisible = false
                    } else {
                        this.$message.success(resp.message)
                    }
                })
            },

            // 编辑学生信息
            editStudent() {

                //  将弹出层中用户填写的学生信息传递后台  实现数据的修改
                updateStudent(this.student).then(resp => {
                    if (resp.code == 0) {
                        //提示信息
                        this.$message.success(resp.message)
                        // 重载表格
                        this.getStudentPage(this.studentPage)
                        // 关闭弹出层
                        this.dialogFormVisible = false
                    } else {
                        this.$message.success(resp.message)
                    }
                })
            },
            // 对话框关闭回调函数
            dialogClose() {
                this.dialogTitle = "新增学生信息"
                this.student = {
                    stuName: '',
                    stuAge: '',
                    sex: '',
                    score: '',
                    tel: ''
                }
            },
            // 编辑学生信息的回调函数
            handleEdit(row) {
                // 设置弹出层的标题
                this.dialogTitle = "编辑学生信息"
                // 显示编辑弹出层
                this.dialogFormVisible = true
                this.student = row
            },
            // 根据id 删除学生信息
            deleteById(id) {
                // TODO  发送请求到后台  删除选中的数据
                let param = []
                // 添加id到数组中
                param.push(id);
                batchDeleteStudent(param).then(resp => {
                    if (resp.code == 0) {
                        this.$message.success(resp.message)
                        // 刷新前端页面数据  重载表格   重新发起请求
                        this.getStudentPage(this.studentPage);
                    }
                })
            },

            // 批量删除的回调函数
            batchDelete() {
                // 判定是否选中删除数据
                if (this.multipleSelection.length == 0) {
                    this.$message.warning("请至少选择一条数据")
                    return false
                }
                // TODO  发送请求到后台  删除选中的数据
                batchDeleteStudent(this.multipleSelection).then(resp => {
                    if (resp.code == 0) {
                        this.$message.success(resp.message)
                        // 刷新前端页面数据  重载表格   重新发起请求
                        this.getStudentPage(this.studentPage);
                    }
                })
            },
            toggleSelection(rows) {
                if (rows) {
                    rows.forEach(row => {
                        this.$refs.multipleTable.toggleRowSelection(row);
                    });
                } else {
                    this.$refs.multipleTable.clearSelection();
                }
            },

            // 复选框被选中时的回调函数
            handleSelectionChange(val) {
                // 处理数据  获取val中的id  遍历数组
                let ids = val.map(stu => stu.id);
                this.multipleSelection = ids;
            },

            handleSizeChange(val) {
                this.studentPage.size = val
                // 重新获取分页数据
                this.getStudentPage(this.studentPage)
            },

            handleCurrentChange(val) {
                this.studentPage.currentPage = val
                //重新获取分页数据
                this.getStudentPage(this.studentPage);
            }
        },
        created() {   //  vue钩子函数  ,当前函数会被自动调用
            // 发送http请求 获取学生信息列表
            this.getStudentPage(this.studentPage);
        }
    }
</script>

<!-- style标签内部是对该组件css样式编写的位置  #student 是css的id选择器 -->
<style scoped>

    #student {
        /*设置文本居中效果*/
        text-align: center;
        /*设置文本的颜色*/
        color: #409EFF;
        /*调整上外边距 100px  像素*/
        margin-top: 50px;
    }

    #student-table {
        /*调整左外边距*/
        margin-left: 100px;
        /*调整右外边距*/
        margin-right: 100px;
        /* 调整下外边距   */
        margin-bottom: 30px;
    }

    #header-button {
        text-align: left;
        margin-left: 100px;
        margin-bottom: 15px;
    }

    #student-page, #student-search {
        text-align: left;
        margin-left: 100px;
    }

    #student-search {
        margin-top: 40px;
    }

</style>
